function TDraw(canvas) {
	var ctx = canvas.getContext('2d');
	fontStyle = '20px Arial';//字体样式
	stroke = 'rgb(0,101,179)';//笔触颜色
	strokeWidth = '4';//笔触宽度
	fillStyle = '#000000';//点击填充颜色
	textCurrentAlgin = "center";
	textColor = "#d6d6d6";
	labelStyle='20px Arial';
	
	//获取绘图形状
	this.getShap = function(type, param) {
		var shap = {};
		switch(type) {
			case "rect":
				shap = new Rect(param,ctx);
				break;
			case "line":
				shap = new Line(param,ctx);
				break;
			case "circle":
				shap = new Circle(param,ctx);
				break;
			case "triangle":
				shap = new Triangle(param,ctx);
				break;
			case "text":
				shap = new Text(param,ctx);
				break;
			case "image":
				shap = new ImageShape(param,ctx);
				break;
			case "process":
				shap = new ProcessShap(param,ctx);
			default:
		}
		return shap;
	};
	
	//矩形
	function Rect(params,ctx){
		this.param = params || {//设置参数
			x: 100,
			y: 100,
			width: 200,
			height: 100
		},
		this.normalStyle= params.normalStyle ||{//正常样式
		},
		this.selected= this.param.selected || false,//是否选中
		this.selectStyle= this.param.selectStyle || {//选中样式
			stroke:'red'
		},
		this.isLabel=this.param.isLabel || false,//是否有文本
		this.label=this.param.label || {value:"",point:{x:10,y:275},labelStyle:'20px Arial',fontColor:'#000000'},
		this.filled = this.param.filled || false, //是否填充
		this.filledColor = this.param.filledColor || "#ff0000",//填充颜色
		this.isTextBaseline =  this.param.isTextBaseline || false,//绘制文本时的当前文本基线
		this.textBaseline = 'hanging',//绘制文本时的当前文本基线
		this.textAlignRe = "center",
		this.draw = function() {
			ctx.restore();
			ctx.beginPath();
			ctx.save();
			
			ctx.lineJoin="bevel";
			
			ctx.strokeStyle = 'rgb(0,101,179)';
			ctx.lineWidth = this.normalStyle.strokeWidth || strokeWidth;
			if(this.filled) { //有填充
				ctx.rect(this.param.x, this.param.y, this.param.width, this.param.height);
				ctx.fillStyle = this.filledColor;
				ctx.fill();
			}else{//无填充
//				ctx.strokeRect(this.param.x, this.param.y, this.param.width, this.param.height);
			}
			
			//选中时添加选中效果
			if(this.selected){
				ctx.strokeStyle = 'gold';
			}
			
			ctx.strokeRect(this.param.x, this.param.y, this.param.width, this.param.height);
			if(this.isTextBaseline){//绘制文本时的当前文本基线
				ctx.textBaseline = this.textBaseline;
			}
			if(this.isLabel){//是否有文本标签
				ctx.font = this.label.labelStyle || labelStyle;
				ctx.fillStyle = this.label.fontColor;
				ctx.textAlign=this.textAlignRe || textCurrentAlgin;  
				if(this.param.textWidth){//文本的宽度限制，为了小矩形中文件过长的考虑
					ctx.fillText(this.label.value, (this.label.point.x + this.param.width/2), this.label.point.y,this.param.textWidth);
				}else{
					ctx.fillText(this.label.value, (this.label.point.x + this.param.width/2), this.label.point.y);
				}
			}
			ctx.restore();
		};
	};
	
	//圆
	function Circle(params,ctx) { //圆
		this.param = params || { //圆的的坐标和半径
				x: 10,
				y: 300,
				r: 500
			},
			this.sAngle = 0, //画圆的起始角
			this.eAngle = 2 * Math.PI, //画圆的结束角
			this.counterclockwise = true, //画圆是逆时针还是顺时针
			this.normalStyle = {
				lineWidth:1,
			},
			this.selected = false, //是否选中
			this.filled = false, //是否填充
			this.filledColor = "#ff0000",
			this.selectStyle = { //选中颜色
				fillStyle: '#ff0000'
			},
			this.isLabel=false,//是否有文本
			this.label={value:"内容",point:{x:10,y:275},labelStyle:'20px Arial'},
			this.draw = function() {
				ctx.save();
				if(this.isLabel){//是否有文本标签
					ctx.font = this.label.labelStyle || fontStyle;
					ctx.fillText(this.label.value, this.label.point.x, this.label.point.y);
				}
				ctx.lineWidth = this.normalStyle['lineWidth'] || strokeWidth;
				ctx.beginPath();
				ctx.arc(this.param.x, this.param.y, this.param.r, this.sAngle, this.eAngle, this.counterclockwise);
				ctx.strokeStyle=this.normalStyle.stroke || stroke;
				ctx.stroke();
				if(this.param.filled) { //圆有填充
					ctx.fillStyle = this.param.filledColor;
					ctx.fill();
				}
				ctx.restore();
			};
	};
	//线
	function Line(params,ctx) {
		this.param = params||{x1:10,y1:300,x2:500,y2:300},//线的起始和终点
		this.isDash=false,//是否为虚线
		this.normalStyle={lineDash:[ 15, 5 ],lineWidth:0.5,stroke:stroke},
		this.isLabel=false,//是否有文本
		this.label={value:"内容",point:{x:10,y:275},labelStyle:'20px Arial'},
		this.draw = function() {
			if(this.isLabel){//是否有文本标签
				ctx.font = this.label.labelStyle || fontStyle;
				ctx.fillStyle = this.normalStyle.stroke;
				ctx.fillText(this.label.value, this.label.point.x, this.label.point.y);
			}
			ctx.restore();
			ctx.save();
			if(this.isDash){//true为虚线,false为实线
				ctx.setLineDash(this.normalStyle['lineDash']);
			}
			ctx.lineWidth = this.normalStyle['lineWidth'] || strokeWidth;
			ctx.beginPath();
			ctx.moveTo(this.param.x1,this.param.y1);
			ctx.lineTo(this.param.x2,this.param.y2);
			ctx.strokeStyle = this.normalStyle['stroke'] || stroke;
			ctx.stroke();
			ctx.restore();
		};
	};
	//三角形
	function Triangle(params,ctx) {
		this.param = params ||{x1:50, y1:50, x2:75, y2:75, x3:50, y3:100},//三角形的三个顶点的坐标
		this.normalStyle={
			
		},
		this.filled = false, //是否填充
		this.filledColor = "#000000",
		this.draw = function() {
			ctx.restore();
			ctx.save();
			ctx.beginPath();
		    ctx.moveTo(this.param.x1, this.param.y1);
		    ctx.lineTo(this.param.x2, this.param.y2);
		    ctx.lineTo(this.param.x3, this.param.y3);
		    ctx.closePath();
		    ctx.stroke();
		    if(this.filled) { //有填充
				ctx.fillStyle = this.filledColor;
				ctx.fill();
			}
		    ctx.restore();
		};
	};
	//文本
	function Text(params,ctx) { 
		this.param = params||{x:50,y:100,value:"内容"},
		this.fontStyle='20px Arial',
		this.draw = function() {
			ctx.restore();
			ctx.save();
			ctx.font = this.fontStyle || fontStyle; //设置字体
			ctx.textAlign='center';
			ctx.fillStyle = this.param.color ||textColor;
		    ctx.fillText(this.param.value,this.param.x ,this.param.y); //设置文本内容
		    ctx.restore();
		};
	};
	//图片
	function ImageShape(params,ctx){
		var img = new Image();
		img.src = '../../images/xunhuan.png';
		this.params = params||{image:img,x:10,y:10,width:25,height:25},
		this.draw = function(){
			ctx.restore();
			ctx.save();
		    ctx.drawImage(this.params.image,this.params.x ,this.params.y,this.params.width,this.params.height);
		    ctx.restore();
		};
	}
	
	//流程图形
	function ProcessShap(params,ctx){
		this.param = params || {//设置参数
			x: 100,
			y: 100,
			width: 200,
			height: 100
		},
		this.normalStyle= params.normalStyle ||{//正常样式
		},
		this.selected= this.param.selected || false,//是否选中
		this.selectStyle= this.param.selectStyle || {//选中样式
			stroke:'red'
		},
		this.isLabel=this.param.isLabel || false,//是否有文本
		this.label=this.param.label || {value:"",point:{x:10,y:275},labelStyle:'20px Arial',fontColor:'#000000'},
		this.filled = this.param.filled || false, //是否填充
		this.filledColor = this.param.filledColor || "#ff0000",//填充颜色
		this.isTextBaseline =  this.param.isTextBaseline || false,//绘制文本时的当前文本基线
		this.textBaseline = 'hanging',//绘制文本时的当前文本基线
		this.textAlignRe = "center",
		this.draw = function() {
			ctx.save();
			ctx.restore();
			ctx.beginPath();
			
			//三角的边长
			var triangleLength = 25;
			//中间矩形的宽度
			var rectangleLength = this.param.width - 30;
			var proccessX = this.param.x;
			var processY = this.param.y;
			ctx.strokeStyle = "rgb(8,89,145)";
			ctx.lineTo(proccessX, processY);
			ctx.lineTo(triangleLength+proccessX, triangleLength+processY);
			ctx.lineTo(proccessX,triangleLength*2+processY);
			ctx.lineTo(rectangleLength+triangleLength+proccessX, triangleLength*2+processY);
			ctx.lineTo(rectangleLength+triangleLength*2+proccessX, triangleLength+processY);
			ctx.lineTo(rectangleLength+triangleLength+proccessX, processY);
			ctx.lineTo(proccessX, processY);
			ctx.font = fontStyle;
			if(this.filled) {//选中效果
				ctx.fillStyle = '#337AB7';
				ctx.fill();
				ctx.fillStyle = '#ffffff';
			}else{//非选中效果
				ctx.fillStyle = '#191970';
				ctx.fill();
				ctx.fillStyle = '#b4b2b2';
			}
			ctx.fillText(this.label.value, proccessX+triangleLength+15, processY+31);
			ctx.stroke();
		};
	};
}
